<!--  -->
<template>
  <div class="side_guide">
      <div class="shop-logo">
          <img class="logo1" src="../assets/img/logo1.png" alt="">
      </div>
      <div class="invite-code">
          <button class="invite-btn" @click="getInviCode">获取邀请码</button>
          <Modal class="model" v-model="modal1" width="290" height="158" :mask-closable="false" :styles="{top:'200px',left:'-800px'}">
            <p slot="header" style="width:290px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
                <span>我的邀请码</span>
            </p>
            <div slot="footer" style="display:flex;justify-content:center;font-size:26px;margin-top:-20px;padding-bottom:20px">
                <div>{{inviCode}}</div>
            </div>
        </Modal>
      </div>
      <div class="shop-list">
        <a href="javascript:;" class="guide_item" :class="{on:'/adpicture'===$route.path}" @click="goTo('/adpicture')">
            <span>
                <img src="../assets/img/pic.png" v-if="'/adpicture'===$route.path?false:true" alt="">
                <img src="../assets/img/pic1.png" v-else alt="">
            </span>
            <span>广告图</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/classmanage'===$route.path}" @click="goTo('/classmanage')">
            <span>
                <img src="../assets/img/liebie.png"  v-if="'/classmanage'===$route.path?false:true" alt="">
                <img src="../assets/img/liebie1.png" v-else alt="">
            </span>
            <span>类别管理</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/goodsmanage'===$route.path}" @click="goTo('/goodsmanage')">
            <span>
                <img src="../assets/img/sp.png" v-if="'/goodsmanage'===$route.path?false:true" alt="">
                <img src="../assets/img/sp1.png" v-else alt="">
            </span>
            <span>商品管理</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/coupon'===$route.path}" @click="goTo('/coupon')">
            <span>
                <img src="../assets/img/yhq.png" v-if="'/coupon'===$route.path?false:true" alt="">
                <img src="../assets/img/yhq1.png" v-else alt="">
            </span>
            <span>优惠券</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/orderlist'===$route.path}" @click="goTo('/orderlist')">
            <span>
                <img src="../assets/img/dd.png" v-if="'/orderlist'===$route.path?false:true" alt="">
                <img src="../assets/img/dd1.png" v-else alt="">
            </span>
            <span>订单列表</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/aftersalelist'===$route.path}" @click="goTo('/aftersalelist')">
            <span>
                <img src="../assets/img/sh.png" v-if="'/aftersalelist'===$route.path?false:true" alt="">
                <img src="../assets/img/sh1.png" v-else alt="">
            </span>
            <span>售后列表</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/userlist'===$route.path}" @click="goTo('/userlist')">
            <span>
                <img src="../assets/img/yh.png" v-if="'/userlist'===$route.path?false:true" alt="">
                <img src="../assets/img/yh1.png" v-else alt="">
            </span>
            <span>用户名单</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/addlist'===$route.path}" @click="goTo('/addlist')">
            <span>
                <img src="../assets/img/tj.png" v-if="'/addlist'===$route.path?false:true" alt="">
                <img src="../assets/img/tj1.png" v-else alt="">
            </span>
            <span>添加订单</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/fxset'===$route.path}" @click="goTo('/fxset')">
            <span>
                <img src="../assets/img/fx.png" v-if="'/fxset'===$route.path?false:true" alt="">
                <img src="../assets/img/fx1.png" v-else alt="">
            </span>
            <span>分销设置</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/bonusdetail'===$route.path}" @click="goTo('/bonusdetail')">
            <span>
                <img src="../assets/img/jj.png" v-if="'/bonusdetail'===$route.path?false:true" alt="">
                <img src="../assets/img/jj1.png" v-else alt="">
            </span>
            <span>奖金明细</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/partnerlist'===$route.path}" @click="goTo('/partnerlist')">
            <span>
                <img src="../assets/img/hhr.png" v-if="'/partnerlist'===$route.path?false:true" alt="">
                <img src="../assets/img/hhr1.png" v-else alt="">
            </span>
            <span>合伙人列表</span>
        </a>
        <a href="javascript:;" class="guide_item" :class="{on:'/suggest'===$route.path}" @click="goTo('/suggest')">
            <span>
                <img src="../assets/img/yjfk1.png" v-if="'/suggest'===$route.path?false:true" alt="">
                <img src="../assets/img/yjfk.png" v-else alt="">
            </span>
            <span>意见反馈</span>
        </a>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        modal1:false,
        managerInfoId:'',
        token:'',
        inviCode:''
    };
  },

  components: {},

  computed: {},
    mounted(){
        this.token = sessionStorage.getItem('token')
        this.managerInfoId = sessionStorage.getItem('userId')
    },
  methods: {
    // 获取邀请码
    async getInviCode(){
        this.modal1=true
        const params = {
            managerInfoId:this.managerInfoId,
            token: this.token
        }
        const result = await this.API.reqInvitationCode(params)
        console.log('邀请码',result)
        if(result.retCode === '000'){
            this.inviCode = result.retData
        }
    },
    goTo(path){
        this.$router.replace(path)
    }
  }
}

</script>
<style lang='stylus'>
.ivu-modal-mask
    background transparent
.ivu-modal-content
    overflow hidden
    .ivu-modal-header
        padding 0
        border none
        span
            margin-left 10px
            font-weight bold
    .ivu-modal-footer
        border none
</style>

<style lang='stylus' scoped>
.side_guide
    width 320px
    height 100%
    background #fff
    .shop-logo
        width 320px
        height 110px
        background #000
        display flex
        justify-content center
        align-items center
        .logo1
            width 285px
            height 40px
    .invite-code
        width 200px
        padding 36px 60px
        .invite-btn
            width 200px
            height 48px
            color #fff
            background #145B3E
            outline none
            border none
            border-radius 10px
            font-size 17px
    .shop-list
        display flex
        flex-direction column
        justify-content center
        align-items flex-end
        width 320px
        font-size 19px
        .guide_item
            display flex
            align-items center
            height 59px
            width 304px
            color #595959
            img 
                width 19px
                height 19px
                margin 0 57px
            &.on
                background rgb(231,238,235)
                border-top-left-radius 50px
                border-bottom-left-radius 50px
                color #145B3E
</style>